<template>
  <el-dialog
    v-model="dialogVisible"
    title=""
    width="500"
    fullscreen
    :show-close="false"
  >
    <div class="update-pwd-card">
      <div class="title">{{ $t("system.userCenter.resetPassword") }}</div>
      <el-form
        ref="formRef"
        :model="user"
        :rules="rules"
        label-position="top"
        label-width="150px"
      >
        <el-form-item
          :label="$t('system.changePassword.newPassword')"
          prop="newPassword"
        >
          <el-input
            v-model="user.newPassword"
            :placeholder="$t('system.changePassword.newPasswordRequired')"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item
          :label="$t('system.changePassword.confirmPassword')"
          prop="confirmPassword"
        >
          <el-input
            v-model="user.confirmPassword"
            :placeholder="$t('system.changePassword.confirmPasswordRequired')"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submit"
            class="text-center"
            v-re-click
          >
            {{ $t("system.changePassword.save") }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { updateUserPwd } from "@/api/system/user";
import { encrypt } from "@/utils/jsencrypt";
import { i18n } from "@/i18n";
import { reactive, ref } from "vue";
import { FormInstance, FormRules } from "element-plus";
import { MessageUtil } from "@/utils/messageUtil";

const dialogVisible = ref(false);

const user = reactive({
  oldPassword: "" as string | undefined,
  newPassword: "" as string | undefined,
  confirmPassword: "" as string | undefined
});

const formRef = ref<FormInstance>();

const equalToPassword = (rule: any, value: string, callback: (error?: Error) => void) => {
  if (user.newPassword !== value) {
    callback(new Error(i18n.global.t("system.changePassword.confirmPasswordMatch")));
  } else {
    callback();
  }
};

const rules: FormRules = {
  oldPassword: [
    {
      required: true,
      message: i18n.global.t("system.changePassword.oldPasswordRequired"),
      trigger: "blur"
    }
  ],
  newPassword: [
    {
      required: true,
      message: i18n.global.t("system.changePassword.newPasswordRequired"),
      trigger: "blur"
    },
    {
      min: 6,
      max: 20,
      message: i18n.global.t("system.changePassword.newPasswordLength"),
      trigger: "blur"
    }
  ],
  confirmPassword: [
    {
      required: true,
      message: i18n.global.t("system.changePassword.confirmPasswordRequired"),
      trigger: "blur"
    },
    {
      validator: equalToPassword,
      trigger: "blur"
    }
  ]
};

const emit = defineEmits(["update"]);

const submit = () => {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      updateUserPwd(encrypt(user.oldPassword as string), encrypt(user.newPassword as string), tokenVal.value).then(() => {
        MessageUtil.success(i18n.global.t("system.changePassword.updateSuccess"));
        emit("update", tokenVal.value);
      });
    }
  });
};
const tokenVal = ref("");

const showDialog = (token: string) => {
  dialogVisible.value = true;
  tokenVal.value = token;
};

defineExpose({
  showDialog
});
</script>
<style scoped lang="scss">
.update-pwd-card {
  width: 400px;
  margin: auto;
}
.title {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
  margin-top: 200px;
}
</style>
